<html>
	<head>
		<title>File Upload</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<script type="text/javascript" src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
	</head>
	<body>
		<div>
			<input type="file" name="files" id="f" multiple/>
			<button id="upload-btn">上传</button>
			<label id="percentProgress"></label>
		</div>
		<script>
			const f=document.getElementById('f');
			const percentProgress=document.getElementById('percentProgress');
			const uploadBtn=document.getElementById('upload-btn');
			function upload(){
				console.dir(f);
				const fdata=new FormData();
				for (const file of f.files){
					fdata.append('files',file);
				}
				$post('/uploader',fdata,percentProgress);
			}

			function $post(url,data,percentProgress){
				const xhr=new XMLHttpRequest();
				xhr.open('post',url,true);
				xhr.upload.addEventListener('progress',function(e){
					if(e.lengthComputable){
						let percentComplete=e.loaded/e.total;
						percentProgress.innerHTML=parseInt(percentComplete*100)+'%';
					}
				})
				xhr.send(data);
			}
			uploadBtn.onclick=()=>{
				if(!f.files){
					alert('请选择文件');
					return;
				}
				upload();
			}
		</script>
	</body>
</html>
